<template>
	<view class="bg-light flex flex-column">
		<view class="flex align-center justify-center fixed-top" style="height: 44px; background-color: #fff">
			<!-- 搜索框 -->
			<view class="mx-3 py-1 flex border border-secondary align-center flex-1 rounded-circle px-1"
				style="background-color: #f6f7f8; color: #959fa0">
				<image src="/static/icon/search.png" mode="" style="margin-right: 8px; width: 20px; height: 20px">
				</image>
				<input @input="oninput" type="text" placeholder="搜索我的采购" v-model="search" />
			</view>
			<text class="mr-2" @click="GoSearch()">搜索</text>
		</view>
		<!-- 订单类型选项卡 -->
		<tabs :tabs="tablist" @tabActive="tabActive" class="fixed-top" style="margin-top: 44px; background-color: #fff">
		</tabs>
		<view id="tab" class="px-3" :style="{ height: itemHeight + 'px' }" style="margin-top: 100px">
			<view @click="onDetails(index)" v-for="(item, index) in Order" :key="index"
				class="p-3 mb-2 bg-white rounded-lg">
				<view class="mb-3 flex justify-between" style="position: relative">
					<text class="font-sm text-muted">采购编号：{{ item.Purchase_Order_SerialNumber }}</text>
				</view>
				<view class="flex mb-3">
					<image :src="Domain_IMG + item.Picture_URL" class="rounded-lg flex-shrink"
						style="width: 140rpx; height: 140rpx" mode=""></image>
					<view class="pr-3 ml-3 text-ellipsis" style="width: 100%; position: relative">
						<view class="flex justify-between">
							<text class="font text-ellipsis" style="width: 80%">{{item.Article_Name}}</text>
							<text class="font-sm text-muted" style="position: absolute; right: 0">{{
					item.Row_Status == "0"
                    ? "待付款"
                    : item.Row_Status == "1"
                    ? "待确认"
                    : item.Row_Status == "3"
                    ? "待发货"
                    : item.Row_Status == "4"
                    ? "已发货"
                    : item.Row_Status == "5"
                    ? "待验收"
                    : ""
                }}</text>
						</view>
						<view class="flex justify-between text-ellipsis">
							<text class="font-sm text-muted text-ellipsis"
								style="position: absolute; bottom: 0; left: 0">规格:{{ item.Specifications_Name }}</text>
							<text class="font-sm"
								style="position: absolute; bottom: 0; right: 0">×{{ item.Quantity }}</text>
						</view>
					</view>
				</view>
				<view class="flex flex-row-reverse">
					<text class="font-sm text-muted">
						<text class="text-hover-dark">{{ item.Quantity }}</text>件商品，合计
						<text class="text-hover-dark font-weight-bold">
							{{item.Amount}}
						</text>
					</text>
				</view>
			</view>
			<view class="flex justify-center font-sm" v-show="Order.length > 0 ? true : false">
				<text>{{ status }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabs from "@/components/tabs/tabs-order.vue";
	import times from "@/mixins/time.js";
	import orlogin from "@/mixins/orlogin.js";
	import {
		getPurchaseRecord
	} from "@/api/merchant.js";
	export default {
		components: {
			tabs,
		},
		data() {
			return {
				loading:false,
				Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
				itemHeight: 0, //选项卡内容高度
				contentIndex: "", //当前点选项卡对应的索引
				selectindex: 0,
				total: 0, //总数据条数
				search: "",
				none: false,
				NowTime: "", //定时器每秒流失的时间
				a: null, //定义定时器
				c: 1 * 1000 * 60 * 15,
				form: {
					page: 1,
					limit: 10,
					Article_Name: "",
					Row_Status:"",
					My_Enterprise_Info_SerialNumber: app.globalData.memberInfo.Enterprise_Info_SerialNumber,
				},
				status: "下拉查看更多", //下拉状态默认
				contentText: {
					//下拉状态切换
					contentdown: "下拉查看更多",
					contentrefresh: "加载中...",
					contentnomore: "没有更多了",
				},
				tablist: [{
						value: "全部",
						isActive: true,
					},
					{
						value: "待付款",
						isActive: false,
					},
					{
						value: "待发货",
						isActive: false,
					},
					{
						value: "已发货",
						isActive: false,
					},
					{
						value: "待验收",
						isActive: false,
					},
				],
				Order: [],
				Void: [],
				newOrder: [],
			};
		},
		onLoad(e) {
			this.selectindex = e.id;
			this.tabActive(this.selectindex);
			uni.getSystemInfo({
				success: (res) => {
					this.itemHeight = res.windowHeight - 88;
				},
			});
			console.log(app.globalData.openid);
			// if (app.globalData.openid == "") {
			//   uni.showModal({
			//     title: "检测未登录",
			//     content: "登陆",
			//     showCancel: false,
			//     success(res) {
			//       if (res.confirm) {
			//         uni.login({
			//           provider: "weixin",
			//           success: function (loginRes) {
			//             uni.request({
			//               header: {
			//                 "Content-Type": "application/x-www-form-urlencoded",
			//               },
			//               url: app.globalData.Domain_Name + "/WXSecret2",
			//               method: "POST",
			//               data: {
			//                 Data: loginRes.code,
			//               },
			//               success: (re) => {
			//                 console.log("re", re);
			//                 app.globalData.openid = re.data.openid;
			//                 app.globalData.memberInfo = re.data.openid;
			//                 if (app.globalData.memberInfo) {
			//                   uni.redirectTo({
			//                     url: "/pages/my/order?id=0",
			//                   });
			//                 }
			//               },
			//             });
			//           },
			//         });
			//       }
			//     },
			//   });
			// }
			this.selectOrder(this.form);
		},
		onReachBottom() {
			//触底函数
			//当查询到的所有数据总和不超过返回的总数时触发下一页请求
			if (this.Order.length < this.total) {
				this.form.page++;
				this.selectOrder(this.form);
			} else {
				//反之则提示"没有更多了"
				this.status = this.contentText.contentnomore;
			}
		},
		methods: {
			async selectOrder(data) {
				if(!this.loading){
					//每次查询时显示"加载中"
					console.log(data);
					this.loading = true
					this.status = this.contentText.contentrefresh;
					const res = await getPurchaseRecord(data);
					if(res.Status=='success'){
						if(res.tableData.length==0){
							this.status = this.contentText.contentnomore;
						}
						this.total = parseInt(res.limit);
						this.Order.push(...res.tableData);
					}		
					this.loading = false
				}
										
			},
			gotop() {
				uni.pageScrollTo({
					scrollTop: 0,
				});
			},
			tabActive(tabIndex) {
				//每次点击选项卡切换，内容改变
				this.tablist.map((value, index) => {
					value.isActive = tabIndex == index ? true : false;
				});
				this.contentIndex = tabIndex;
				if (tabIndex == 0) {
					// 清除定时器,并且把时间取消掉
					if (this.a) {
						clearInterval(this.a);
						this.NowTime = "";
						this.a = null;
					}
					this.none = false;
					this.gotop();
					this.Order = [];
					(this.form.page = 1), (this.form.Row_Status = "");
					this.selectOrder(this.form);
					if (this.Order.length == 0) {
						this.none = true;
					}
				} else if (tabIndex == 1) {
					//进入页面直接获取到15分钟
					this.NowTime = times.GetHourMintesSeconds(this.c);
					//定义定时器每秒减少1秒做成倒计时
					this.a = setInterval(() => {
						this.c = this.c - 1000;
						this.NowTime = times.GetHourMintesSeconds(this.c);
					}, 1000);
					this.none = false;
					this.gotop();
					this.Order = [];
					(this.form.page = 1), (this.form.Row_Status = "0");
					this.selectOrder(this.form);
					if (this.Order.length == 0) {
						this.none = true;
					} else {
						this.none = false;
					}
				} else if (tabIndex == 2) {
					if (this.a) {
						clearInterval(this.a);
						this.NowTime = "";
						this.a = null;
					}
					this.none = false;
					this.gotop();
					this.Order = [];
					(this.form.page = 1), (this.form.Row_Status = "3");
					this.selectOrder(this.form);
					if (this.Order.length == 0) {
						this.none = true;
					} else {
						this.none = false;
					}
				} else if (tabIndex == 3) {
					if (this.a) {
						clearInterval(this.a);
						this.NowTime = "";
						this.a = null;
					}
					this.none = false;
					this.gotop();
					this.Order = [];
					(this.form.page = 1), (this.form.Row_Status = "4");
					this.selectOrder(this.form);
					if (this.Order.length == 0) {
						this.none = true;
					} else {
						this.none = false;
					}
				} else if (tabIndex == 4) {
					if (this.a) {
						clearInterval(this.a);
						this.NowTime = "";
						this.a = null;
					}
					this.NowTime = "";
					this.none = false;
					this.gotop();
					this.Order = [];
					(this.form.page = 1), (this.form.Row_Status = "5");
					this.selectOrder(this.form);
					if (this.Order.length == 0) {
						this.none = true;
					} else {
						this.none = false;
					}
				}
			},
			onDetails(index) {
				//跳转订单详情
				uni.navigateTo({
					url: `/pages/Merchant/Procure_orderDetails?Order=${encodeURIComponent(JSON.stringify(this.Order[index]))}`
				});
			},
			oninput(e) {
				this.search = e.detail.value;
				this.Order = [];
				this.gotop();
				this.form.page = 1;
				this.form.Article_Name = this.search;
				this.selectOrder(this.form);
			},
			accMul(arg1, arg2) {
				let m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {}
				return (
					(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
					Math.pow(10, m)
				);
			},
			GoSearch() {
				//订单搜索框
				if (this.search.trim() == "") {
					uni.showToast({
						title: "请输入关键字",
						icon: "error",
					});
					return;
				}
				this.Order = [];
				this.gotop();
				this.form.page = 1;
				this.form.Article_Name = this.search;
				this.selectOrder(this.form);
			},
		},
	};
</script>

<style>
</style>